<template>
  <div>
    <h2>块级元素水平垂直居中</h2>
    <article>
      flex布局
      <br />
      grid布局
      <br />
      table布局
      <br />
      定位+margin: auto
      <br />
      定位+transform 子元素-50%
      <br />
      定位+margin: 子元素宽高-50%
    </article>
    <h3>flex方案一</h3>
    <div class="outer o1">
      <div class="inner i1"></div>
    </div>

    <h3>flex方案二</h3>
    <div class="outer o2">
      <div class="inner i2"></div>
    </div>

    <h3>grid方案一</h3>
    <div class="outer o3">
      <div class="inner i3"></div>
    </div>

    <h3>grid方案二</h3>
    <div class="outer o4">
      <div class="inner i4"></div>
    </div>

    <h3>absolute方案一</h3>
    <div class="outer o5">
      <div class="inner i5">transform</div>
    </div>

    <h3>absolute方案二</h3>
    <div class="outer o6">
      <div class="inner i6">margin:auto</div>
    </div>

    <h3>absolute方案三</h3>
    <div class="outer o7">
      <div class="inner i7">margin: 负数</div>
    </div>

    <h3>table布局</h3>
    <div class="outer o8">
      <div class="inner i8"></div>
    </div>

    <h3>多行文本垂直居中</h3>
    <div class="div1">
      <span class="span1">
        方法二：对子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性，使其基线对齐。添加line-height属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。
      </span>
    </div>

    <div class="father">
      <div class="son">
        父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle和text-align:center即可垂直
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {},
  data() {
    return {};
  },
  components: {},
});
</script>

<style scoped>
article {
  padding: 20px 25px;
  color: white;
  background: rgba(0, 0, 0, 0.3);
}
.outer {
  width: 100%;
  height: 200px;
  background: #2f54eb;
}

.inner {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: #eb2f96;
  color: white;
  text-align: center;
}

.div1 {
  height: 300px;
  width: 300px;
  line-height: 300px;
  background-color: rgba(47, 84, 235, 1);
  color: white;
  padding: 20px;
}
.span1 {
  display: inline-block;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
}

.father {
  display: table;
  width: 300px;
  height: 300px;
  padding: 20px;
  color: white;
  margin-top: 20px;
  background: rgba(235, 47, 150, 1);
}

.son {
  display: table-cell;
  vertical-align: middle;
}

.o1 {
  display: flex;
  /*水平居中*/
  justify-content: center;
  /*垂直居中*/
  align-items: center;
}

.o2 {
  display: flex;
}

.i2 {
  margin: auto;
}

.o3 {
  display: grid;
}

.i3 {
  justify-self: center;
  align-self: center;
}

.o4 {
  display: grid;
}

.i4 {
  margin: auto;
}

.o5 {
  position: relative;
}

.i5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.o6 {
  position: relative;
}

.i6 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.o7 {
  position: relative;
}

/*适用于固定宽高*/
.i7 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

.o8 {
  display: table-cell;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  text-align: center;
}
.i8 {
  display: inline-block;
}
</style>
